<template>
  <div class="config-info">
    <div class="content-box">
      <div class="content-left">
        <div class="left-title">控制断面名称</div>
        <div class="left-box">
          <div
            :class="['box-item', state.current == index ? 'active' : '']"
            :key="index"
            v-for="(item, index) in state.secList"
          >
            <span @click="handleClickSec(item, index)">{{ item.blknm }}</span
            ><span>
              <el-icon @click="handleEditConifg">
                <EditPen />
              </el-icon>
            </span>
          </div>
        </div>
      </div>
      <div class="content-right">
        <div class="right-title">
          区域计算方案设置区-<span>{{ state.secName }}</span>
        </div>
        <div class="right-box">
          <el-tabs type="border-card" @tab-click="handleTabsClcik">
            <el-tab-pane label="洪水预报">
              <div class="flood-form">
                <div class="form-item">
                  <span class="name">模&nbsp;&nbsp;型&nbsp;&nbsp;名&nbsp;称&nbsp;:</span>
                  <span>
                    <el-select
                      v-model="state.formName.chlMid"
                      class="m-2"
                      :disabled="!state.editFlag"
                      placeholder="请选择"
                      @change="handleChangeWaterFlood"
                    >
                      <el-option
                        v-for="item in state.waterflood"
                        :key="item.id"
                        :label="item.modelName"
                        :value="item.id"
                      />
                    </el-select>
                  </span>
                </div>
                <div class="form-item">
                  <span class="name">模型参数方案:</span>
                  <span> {{ state.floodParams || '--' }}</span>
                  <span class="btn-color" @click="handleSearchParams">查看方案参数</span>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="河道演进">
              <div class="flood-form">
                <div class="form-item">
                  <span class="name">模&nbsp;&nbsp;型&nbsp;&nbsp;名&nbsp;称&nbsp;:</span>

                  <span>
                    <el-select
                      v-model="state.formName.evolMid"
                      class="m-2"
                      :disabled="!state.editFlag"
                      placeholder="请选择"
                      @change="handleChangeRiverInfo"
                    >
                      <el-option
                        v-for="item in state.riverInfo"
                        :key="item.id"
                        :label="item.modelName"
                        :value="item.id"
                      />
                    </el-select>
                  </span>
                </div>
                <div class="form-item">
                  <span class="name">模型参数方案:</span>
                  <span> {{ state.riverParams || '--' }}</span>
                  <span class="btn-color" @click="handleSearchParams">查看方案参数</span>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="水工程">
              <div class="flood-form">
                <div class="form-item">
                  <span class="name">工&nbsp;&nbsp;程&nbsp;&nbsp;类&nbsp;型&nbsp;:</span>
                  <span>水库</span>
                </div>
                <div class="form-item">
                  <span class="name">模&nbsp;&nbsp;型&nbsp;&nbsp;名&nbsp;称&nbsp;:</span>
                  <span>
                    <el-select
                      v-model="state.formName.resvMid"
                      class="m-2"
                      :disabled="!state.editFlag"
                      placeholder="请选择"
                      @change="handleChangeReservoir"
                    >
                      <el-option
                        v-for="item in state.reservoir"
                        :key="item.id"
                        :label="item.modelName"
                        :value="item.id"
                      />
                    </el-select>
                  </span>
                </div>
                <div class="form-item">
                  <span class="name">模型参数方案:</span>
                  <span>{{ state.reservoirParams || '--' }}</span>
                  <span class="btn-color">查看方案参数</span>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="footer-btn">
          <el-button type="primary" v-if="state.editFlag" @click="handleSaveScheme"
            >保存方案</el-button
          >
        </div>
      </div>
    </div>
  </div>
  <!-- 弹窗 -->
  <ConfigParagm :dialogVisible="showDialog" @closeDialog="closeDig" :paramsDetail="paramsDetail" />
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue'
import emitter from '@/utils/bus'
import ConfigParagm from './cpns/configParagm.vue'
import { getXajParamsDetail } from '@/services/modules/model-config'
import {
  getAreaSecList,
  getAreaSchemeConfig,
  getModel,
  getPmSchemes
} from '@/services/modules/compute-methods'
const state = reactive({
  editFlag: false,
  secBlkcd: '',
  secName: '',
  secList: [],
  current: 0,
  waterflood: [],
  riverInfo: [],
  reservoir: [],
  areaConfig: {
    paramConf: []
  },
  paramConfArr: [],
  formName: {
    chlMid: '',
    evolMid: '',
    resvMid: '',
    chlScid: '',
    evolScid: '',
    resvScid: '',
    blkcd: ''
  },
  waterfloodParams: {
    modelType: '',
    mid: '',
    blkcd: ''
  },
  riverInfoParams: {
    modelType: '',
    mid: '',
    blkcd: ''
  },
  reservoirParams: ''
})

const props = defineProps({
  schemeId: {
    type: Number,
    default: 0
  },
  zId: {
    type: Number,
    default: 0
  }
})
//查看参数详情
let paramsDetail = ref({})
let showDialog = ref(false)
function handleSearchParams() {
  getXajParamsDetail({
    scid: state.formName.chlScid
  }).then((res) => {
    if (res.code === 200) {
      paramsDetail.value = res.data
      if (res.data) {
        showDialog.value = true
        console.log('66', showDialog)
      }
    }
  })
}
const closeDig = (v) => {
  showDialog.value = v
}
//编辑预报断面
function handleEditConifg() {
  state.editFlag = true
}
//修改预报模型
function handleChangeWaterFlood(item) {
  let arr = state.waterflood.filter((e) => {
    return e.id == item
  })
  state.waterfloodParams = { modelType: arr[0].id, mid: arr[0].id, blkcd: state.secBlkcd }
  // console.log('arr',arr[0])
  getPmSchemes(state.waterfloodParams).then((res) => {
    if (res.code === 200 && res.data?.length) {
      state.floodParams = res.data[0].name
      state.formName.chlScid = res.data[0].id
    } else {
      state.floodParams = ''
    }
  })
}
//修改河道演进
function handleChangeRiverInfo(item) {
  let arr = state.riverInfo.filter((e) => {
    return e.id == item
  })
  state.riverInfoParams = { modelType: arr[0].id, mid: arr[0].id, blkcd: state.secBlkcd }
  // console.log('arr',arr[0])
  getPmSchemes(state.riverInfoParams).then((res) => {
    if (res.code === 200 && res.data?.length) {
      state.riverParams = res.data[0].name
      state.formName.evolScid = res.data[0].id
    }
  })
}
//修改水库
function handleChangeReservoir(item) {
  let arr = state.reservoir.filter((e) => {
    return e.id == item
  })
  // console.log('arr',arr[0])
  getPmSchemes({ modelType: arr[0].id, mid: arr[0].id, blkcd: state.secBlkcd }).then((res) => {
    if (res.code === 200 && res.data?.length) {
      state.reservoirParams = res.data[0].name
      state.formName.resvScid = res.data[0].id
    }
  })
}
//
function handleTabsClcik(val) {
  getModelList(Number(val.index) + 1)
}
//点击断面
async function handleClickSec(item, index) {
  console.log(item, '参数遗憾')
  //
  ;(state.formName = {
    chlMid: '',
    evolMid: '',
    resvMid: '',
    chlScid: '',
    evolScid: '',
    resvScid: '',
    blkcd: ''
  }),
    (state.editFlag = false)
  state.current = index
  state.secBlkcd = item.blkcd
  state.secName = item.blknm
  await getAreaSchemeConfigList(props.schemeId)
  if (state.areaConfig?.paramConf?.length > 0) {
    let a = state.areaConfig.paramConf.filter((e) => {
      return e.blkcd == item.blkcd
    })
    if (a.length > 0) {
      console.log(a[0], '菜哦山')
      state.formName = a[0]
      state.formName.id = undefined
      state.formName.scid = undefined
      console.log('123', state.formName)
    }
    state.formName.blkcd = item.blkcd
    let flag = state.paramConfArr.filter((child) => {
      return child.blkcd == item.blkcd
    })
    if (flag.length == 0) {
      state.paramConfArr.push(state.formName)
    }
    handleChangeWaterFlood(state.formName.chlMid)
  }
  emitter.emit('fixedPosition', item)
  emitter.emit('fixedSec', item.blkcd)
}
const emit = defineEmits(['handleTabsClcik'])

function handleSaveScheme() {
  emit('handleSaveScheme', state.paramConfArr)
}
function getSecList(id) {
  return new Promise((resolve, reject) => {
    getAreaSecList({ zid: id }).then((res) => {
      if (res.code === 200) {
        state.secList = res.data
        resolve(state.secList)
      }
    })
  })
}
function getAreaSchemeConfigList(schemeId) {
  return new Promise((resolve, reject) => {
    getAreaSchemeConfig({ scid: schemeId }).then((res) => {
      if (res.code === 200) {
        state.areaConfig = res.data
        resolve(state.areaConfig)
      }
    })
  })
}
function getModelList(val) {
  getModel({ specialId: val }).then((res) => {
    if (res.code === 200) {
      switch (val) {
        case 1:
          return (state.waterflood = res.data)
        case 2:
          return (state.riverInfo = res.data)
        case 3:
          return (state.reservoir = res.data)

        default:
          break
      }
    }
  })
}
onMounted(() => {
  getModelList(1)
  //  getModelList(2)
  //   getModelList(3)
})
watch(
  () => props.schemeId,
  () => {
    if (props.schemeId) {
      console.log(props.schemeId, 88888)
      getAreaSchemeConfigList(props.schemeId)
    }
    state.paramConfArr = []
  },
  { immediate: true, deep: true }
)
watch(
  () => props.zId,
  async () => {
    await getSecList(props.zId)
    state.paramConfArr = []
    if (state.secList.length) {
      handleClickSec(state.secList[0], 0)
    }
    state.editFlag = false
  },
  { immediate: true, deep: true }
)
</script>

<style lang="less" scoped>
.config-info {
  width: 100%;
  height: 100%;
  .content-box {
    display: flex;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    .content-left {
      width: 150px;
      height: 100%;
      border-right: 2px solid #eee;
      .left-title {
        height: 40px;
        background: #eee;
        display: flex;
        justify-content: center;
        align-items: center;
        color: black;
      }
      .left-box {
        height: calc(100% - 40px);
        overflow-y: auto;
        :deep(.el-collapse-item__wrap) {
          border: none;
        }
        :deep(.el-collapse-item__header) {
          padding-left: 10px;
        }
        :deep(.el-collapse) {
          .el-collapse-item {
            .box-item {
              text-align: center;
            }
          }
        }
        .box-item {
          height: 30px;
          color: gray;
          display: flex;
          justify-content: space-between;
          align-items: center;
          &.active {
            span:nth-of-type(1) {
              cursor: pointer;
              color: #409eff;
            }
          }
          &:hover {
            span:nth-of-type(1) {
              cursor: pointer;
              color: #409eff;
            }
          }
          span:nth-of-type(2) {
            color: #409eff;
            margin-right: 10px;
          }
        }
      }
    }
    .content-right {
      width: calc(100% - 150px);
      height: 100%;
      padding-left: 10px;
      .right-title {
        margin-bottom: 10px;
        span {
          color: #409eff;
        }
      }
      .right-box {
        width: 100%;
        height: calc(100% - 80px);
        :deep(.el-tabs--border-card) {
          height: 100%;
          .el-tabs__content {
            height: calc(100% - 60px);
            .el-tab-pane {
              height: 100%;
              .flood-form {
                padding: 15px;
                .form-item {
                  height: 50px;
                  .btn-color {
                    cursor: pointer;
                    color: #409eff;
                    margin-left: 50px;
                  }
                  .name {
                    color: grey;
                    margin-right: 20px;
                  }
                }
              }
            }
          }
        }
      }
      .footer-btn {
        text-align: right;
        margin-top: 10px;
      }
    }
  }
}
</style>
